<template>
	<view class="index">
		<!-- 手机缴费页 -->
		<view class="YYS" @click="changeYYS">
			请选择运营商：
			<text>{{this.operatorList[this.operator]}}</text>
		</view>
		
		<input type="text" 
			v-model="phonenumber"
			placeholder="请输入手机号码">
		
		<view class="money" v-if="isShow">
			余额：
			<text>{{this.money}}</text>元
		</view>
		<view class="numInfo" 
			v-if="preserveNum!=''&&preserveTime!=''" 
			hover-class="changeNum">
			<text @click="changeNum">
				中国移动 {{this.preserveNum}} {{this.preserveTime}}
			</text>
			<text @click="del">X</text>
		</view>
		
		<button
		type="primary"
		:disabled="phonenumber!=''? false:true"
		@click="query"
		>查 询</button>
		<button
		type="primary"
		plain
		@click="goPayment"
		>交 费</button>
	</view>
</template>

<script>
	import { http } from "../../utils/request.js"
	export default {
		data() {
			return {
				isShow:false,
				operator:0,
				operatorList:['中国移动', '中国联通','中国电信'],
				phonenumber:"13800000000",
				money:0,
				preserveNum:"",
				preserveTime:""
			};
		},
		onShow() {
			// 从缓存中读取常用手机号码和保存的时间
			this.preserveNum=uni.getStorageSync("preserveNum")
			this.preserveTime=uni.getStorageSync("preserveTime")
			// 隐藏余额显示
			this.isShow=false
		},
		methods:{
			// 更换运营商
			changeYYS(){
				uni.showActionSheet({
					itemList: this.operatorList,
					success: res=> {
						this.operator = res.tapIndex
					}
				});
			},
			// 常用号码信息快捷输入
			changeNum(){
				this.phonenumber=this.preserveNum
				this.operator=0
			},
			// 删除常用号码信息（从缓存中）
			del(){
				uni.removeStorageSync("preserveNum")
				uni.removeStorageSync("preserveTime")
				this.preserveNum=""
				this.preserveTime=""
				uni.showToast({
					title:"删除成功！"
				})
			},
			// 查询
			query(){
				this.isShow=false
				http({
					url:"/prod-api/api/living/phone",
					data:{
						operator:this.operatorList[this.operator],
						phonenumber:this.phonenumber
					}
				}).then(res=>{
					if(res.data.code==200){
						this.money=res.data.data.balance
						this.isShow=true
						uni.showToast({
							title:"查询成功！",
						})
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
					}
				})
			},
			// 跳转到交费页
			goPayment(){
				uni.navigateTo({
					url:"/pages/living_expenses/payment"
				})
			}
		}
	}
</script>

<style lang="scss">
.index{
	padding: 40rpx;
	.YYS{
		text{
			font-weight: bold;
			font-size: 48rpx;
		}
	}
	input{
		margin: 40rpx 0 10rpx;
		border-bottom: 1px solid #ccc;
		font-weight: bold;
		font-size: 48rpx;
	}
	.money{
		margin-bottom: 10rpx;
		font-size: 36rpx;
		text{
			color: red;
			font-weight: bold;
		}
	}
	.numInfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		color: #ccc;
		border: 1px solid #ccc;
		font-size: 26rpx;
		border-radius: 15rpx;
		width: 100%;
		padding: 0 20rpx;
		&.changeNum{
			background-color: #ccc;
			color: #fff;
		}
	}
	button{
		margin-top: 40rpx;
		border-radius: 20rpx;
	}
	button::after{
		border: 0;
	}
}
</style>